<template>
	<view class="content">
		<view v-if="goods.length==0" style="width: 100%;line-height: 300upx;font-size: 24upx; text-align: center; height: 300upx;background-color: #ffffff;">还没收藏的二手物品哦~~</view>
		<view class="goodslist">
			<view class="goods" v-for="(item,index) in goods" :key="index" @tap="go_detail(index)">
				<image :src="getRealPath(item.goodsImgUrl)" mode=""></image>
				<view class="name">{{item.goodsName}}</view>
				<view class="bottom">
					<view class="price">￥{{item.goodsPrice}}</view>
					<view class="time">{{formatTime(item.createTime)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				goods: []
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate();
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			getGoods() {
				let that = this;
				utils.get("market/usercollection", {
					userId: this.user.id
				}, function(data) {
					that.goods = data;
				});
			},
			go_detail(index) {
				uni.navigateTo({
					url: 'goodsdetail?good=' + JSON.stringify(this.goods[index])
				});
			},
		},
		onShow() {
			this.getGoods();
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.goodslist {
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		margin-bottom: 30upx;

	}

	.goods {
		width: 48%;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 0 15rpx 0;
		box-shadow: 0rpx 5rpx 25rpx rgba(0, 0, 0, 0.1);
		margin-top: 14upx;
	}

	.goods image {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		height: 166px;

	}

	.name {
		width: 92%;
		padding: 10rpx 4%;
		text-align: justify;
		overflow: hidden;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 92%;
		padding: 10rpx 4% 10rpx 4%;


	}

	.price {
		color: #e65339;
		font-size: 30rpx;
		font-weight: 600;


	}

	.time {
		color: #807c87;
		font-size: 24rpx;


	}
</style>
